<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/bootstrap/bootstrap.css">
    <style>
        body {
            padding-bottom: 800px;
        }

        .box {
            margin: 0 auto;
            width: 800px;
        }

        .card {
            width: 400px;
            background-color: #dedede;
            margin: 0 auto;
        }

        .table td,
        table th {
            vertical-align: middle;
            text-align: center;
        }

        .num-ground {
            width: 160px;
            margin: 0 auto;
        }

        .num-ground input[type="text"] {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="box">
            <div class="card mt-4">
                <div class="card-body">
                    <form>
                        <div class="mb-3">
                            <label class="form-label">产品名称</label>
                            <input type="text" class="form-control" v-model="newGood.goodName">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">产品数量</label>
                            <input type="number" class="form-control" v-model="newGood.goodPrice">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">产品单价</label>
                            <input type="number" class="form-control" v-model="newGood.goodNums">
                        </div>
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-primary" @click="addNewGood()">添加</button>
                        </div>
                    </form>
                </div>
            </div>
            <table class="table table-bordered mt-4">
                <thead class="table-dark">
                    <tr>
                        <th>
                            <input type="checkbox" :checked="getAllSate()" @change="changeGoodsState($event.target.checked)">
                        </th>
                        <th>编号</th>
                        <th>产品名称</th>
                        <th>产品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for=" (good,i) in goods" :key="good.goodId">
                        <td>
                            <input type="checkbox" v-model="good.state">
                        </td>
                        <td>{{ i+1 }}</td>
                        <td>{{ good.goodName }}</td>
                        <td>{{ good.goodPrice }}</td>
                        <td>
                            <div class="input-group input-group-sm num-ground">
                                <!-- <button class="btn btn-outline-secondary" type="button" @click="subGoodNums(i)">-</button> -->
                                <button class="btn btn-outline-secondary" type="button" @click="subGoodNums2(i,good)">-</button>
                                <input type="text" class="form-control" readonly :value="good.goodNums">
                                <button class="btn btn-outline-secondary" type="button" @click="good.goodNums++">+</button>
                            </div>
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm" @click="removeGood(i,good.goodName)">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            总计
                        </td>
                        <td colspan="3">
                            被选中<span style="color:red;">{{ count().count }}</span>,
                            总计<span style="color:red;">{{ count().sum }}</span>元
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm" @click="removeChooseGood()">删除选择项</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>

    <script src="../assets/mock/mock-min.js"></script>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    newGood:{
                        goodName: "",
                        goodPrice: 0,
                        goodNums: 0,
                        state:false
                    },
                    goods: Mock.mock({
                        "list|4": [
                            {
                                goodId:"@id",
                                goodName: "@cword(5)",
                                goodPrice: "@float(60, 100, 2, 2)",
                                goodNums: "@integer(1, 10)",
                                state:false
                            }
                        ]
                    }).list
                }
            },
            methods:{
                getAllSate(){
                    return this.goods.length==0 ? false : this.goods.every( g=>g.state );
                },
                changeGoodsState(flag){
                    this.goods.forEach(p => p.state=flag);
                },
                count(){
                    let result = {
                        count:0,
                        sum:0
                    }
                    for (let i = 0; i < this.goods.length; i++) {
                        if(this.goods[i].state){
                            result.count++;
                            result.sum += this.goods[i].goodPrice*this.goods[i].goodNums
                        }
                    }
                    return result;
                },
                addNewGood(){
                    this.newGood.goodId = Mock.mock("@id");
                    this.goods.push(this.newGood);
                    this.newGood = {
                        goodName: "",
                        goodPrice: 0,
                        goodNums: 0,
                        state:false
                    };
                },
                // subGoodNums(i){
                //     this.goods[i].goodNums--;
                // },
                subGoodNums2(i,good){
                    let tempNum = good.goodNums - 1;
                    if(tempNum<=0){
                        this.removeGood(i,good.goodName)
                    }else{
                        good.goodNums--;
                    }
                },
                removeGood(i,name){
                    let flag = confirm(`是否删除“${name}”商品`)
                    if(flag){
                        this.goods.splice(i,1)
                    }
                },
                removeChooseGood(){
                    this.goods = this.goods.filter(p=>!p.state)
                }
            }
        }).mount("#app")
    </script>
</body>

</html>